<template>
  <view class="flex items-center bg-white rounded-[60rpx] px-[40rpx] pr-[20rpx] py-[12rpx] shadow-[0_8rpx_24rpx_rgba(33,150,243,0.15)]">
    <input
      type="text"
      :value="modelValue"
      @input="onInput"
      placeholder="搜索职位、公司或关键词..."
      class="flex-1 border-none outline-none text-[28rpx] text-[#263238] px-[20rpx] h-[48rpx] leading-[48rpx]"
    />
    <nut-button type="info" class="rounded-full w-[56rpx] h-[56rpx] flex items-center justify-center ml-[8rpx] p-0" @click="performSearch">
      <IconFont font-class-name="iconfont" class-prefix="icon" name="sousuo" size="20" color="#fff" :style="{ display: 'flex' }" />
    </nut-button>
  </view>
</template>

<script setup lang="ts">
import { defineModel, defineEmits } from 'vue'
import { IconFont } from '@nutui/icons-vue-taro'

const modelValue = defineModel<string>({ default: '' })
const emit = defineEmits(['search'])

function onInput(e: Event) {
  const target = e.target as HTMLInputElement | null
  if (target) modelValue.value = target.value
}
function performSearch() {
  emit('search', modelValue.value)
}
</script>